<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var id;
        $(function(){
            id = updateId;
            $.get("/web/caseInfo",{op:"input",caseId:id},function(data){
                $("#caseTitle").val(data.caseTitle);
                $("#caseDesc").val(data.caseDesc);
                $("#caseImg").val(data.caseImg);
                $("#img-box1").append("<img src='" + data.caseImg + "' height='100'/>");
                $("#caseDetails").val(data.caseDetails);
                $("#caseDetailsImg").val(data.caseDetailsImg);
                $("#img-box2").append("<img src='" + data.caseDetailsImg + "' height='100'/>");
            });
        });
    </script>
</head>
<body>
<div class="nav">
        <ul>
            <li>案例管理</li>
            <li>/</li>
            <li>编辑案例</li>
        </ul>
    </div>
    <div>
            <form action="">
            <p>案例标题:<input name="caseTitle" id="caseTitle" type="text"></p>
            <p>案例描述: <textarea name="caseDesc" id="caseDesc" style="width: 700px;"></textarea></p>
            <p><input type="hidden" class="hiddenImg" name="caseImg" id="caseImg"></p>
            <p>案例图片:<input name="file" type="file">
                <input name="Token" type="hidden" value="68gl3i8ak1kj495d92p76ri37iaork9l:1EBWt6slqN4v0mdjtTTQcBec6MY=:eyJkZWFkbGluZSI6MTY2MTE3MjcyOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoxNzc4MiwiYWlkIjoiMzMwMjYiLCJmcm9tIjoiZmlsZSJ9">
                <input type="button" class="btn" onclick="upLoadPicture(0)" value="上传">
            </p>
            <div class="img-box" id="img-box1"></div>
        </form>
        <form action="">
            <p>案例详情:<textarea name="caseDetails" id="caseDetails" style="width: 700px;"></textarea></p>
            <p><input type="hidden" class="hiddenImg" name="caseDetailsImg" id="caseDetailsImg"></p>
            <p>案例详情图片:<input name="file" type="file">
                <input name="Token" type="hidden" value="68gl3i8ak1kj495d92p76ri37iaork9l:1EBWt6slqN4v0mdjtTTQcBec6MY=:eyJkZWFkbGluZSI6MTY2MTE3MjcyOCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoxNzc4MiwiYWlkIjoiMzMwMjYiLCJmcm9tIjoiZmlsZSJ9">
                <input type="button" class="btn" onclick="upLoadPicture(1)" value="上传">
            </p>
            <div class="img-box" id="img-box2"></div>
            <p class="btn-box">
                <input type="button" value="提交" onclick="doIt()">
                <input type="reset" value="重置">
            </p>
        </form>
    </div>
    <script>
        tinymce.init({
            selector: 'textarea', //容器，可使用css选择器
            language: 'zh_CN', //调用放在langs文件夹内的语言包
            toolbar: true, //工具栏
            menubar: true, //菜单栏
            branding: false, //右下角技术支持
            inline: false, //开启内联模式
            elementpath: false,
            min_height: 400, //最小高度
            height: 800, //高度
            skin: 'oxide',
            toolbar_sticky: true,
            visualchars_default_state: true, //显示不可见字符
            image_caption: true,
            paste_data_images: true,
            relative_urls: false,
            // remove_script_host : false,
            removed_menuitems: 'newdocument', //清除“文件”菜单
            plugins: "lists,hr,advlist,anchor,autolink,autoresize,charmap,code,codesample,emoticons,fullscreen,image,media,insertdatetime,link,pagebreak,paste,preview,print,searchreplace,table,textcolor,toc,visualchars,wordcount",   //依赖lists插件
            toolbar: 'bullist numlist anchor charmap emoticons fullscreen hr image insertdatetime link media pagebreak paste preview print searchreplace textcolor wordcount',
            images_upload_url: 'a.php',
            setup: function (editor) {
                editor.on('change', function () { editor.save(); });
            }
        });
    </script>
    <script>
        function upLoadPicture(op) {
            var formData = new FormData($('form')[op]);
            var imgBoxs = $(".img-box");
            var hiddenImgs = $(".hiddenImg");
            $.ajax({
                url: 'http://up.tietuku.cn/',
                type: 'POST',
                success: function (data) {
                    //window.location.reload();
                    $(imgBoxs[op]).empty();
                    $(imgBoxs[op]).append("<img src='" + data.linkurl + "' height='100'/>");
                    $(hiddenImgs[op]).val(data.linkurl);
                },
                error: function (data) {
                    console.log(data);
                },
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            });
        }
    </script>
    <script>
        function doIt(){
            var caseTitle = $("#caseTitle").val();
            var caseImg = $("#caseImg").val();
            var caseDetailsImg = $("#caseDetailsImg").val();
            var caseDesc = tinymce.editors[0].getContent();
            var caseDetails = tinymce.editors[1].getContent();
            $.post("/web/caseInfo",{op:"update",caseId:id,caseTitle:caseTitle,caseImg:caseImg,caseDetailsImg:caseDetailsImg,caseDesc:caseDesc,caseDetails:caseDetails},function(data){
                $("#content").load("caseInfo/caseInfo-list.html");
                alert("编辑"+(data=='1'?"成功":"失败"));
            })
        }
    </script>
</body>
</html>